<template>
  <transition name="vbestui-modal-fade">
    <div :class="prefixCls" v-show="show" :style="{zIndex:zIndex}">
      <div :class="prefixCls+'-mask'" v-if="showMask" @click="maskClick()"></div>
      <div :class="prefixCls+'-content'" :style="{width:width,height:height,marginTop:marginTop}">
        <div :class="prefixCls+'-close'" @click="modalClose()">
          <slot name="close">
            <b-button type="text" width="20px" height="20px">
              <div class="vbestui-iconfont icon-x"></div>
            </b-button>
          </slot>
        </div>
        <div :class="prefixCls+'-top'">
          <slot name="header">
            <h3>{{title}}</h3>
          </slot>
        </div>
        <div :class="prefixCls+'-context'">
          <slot>{{content}}</slot>
        </div>
        <div :class="prefixCls+'-footer'">
          <slot name="footer">
            <b-button type="primary" size="small" @click="ok">确定</b-button>
            <b-button type="default" size="small" @click="cancel">取消</b-button>
          </slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
const prefixCls="vbestui-modal"
export default {
  name: "Modal",
  data(){
    return{
      prefixCls:prefixCls
    }
  },
  props: {
    title: {
      type: String,
      default: "对话框标题",
    },
    content: {
      type: String,
      default: "对话框内容",
    },
    show: {
      type: Boolean,
      default: false,
    },
    showMask: {
      type: Boolean,
      default: true,
    },
    maskClosable: {
      //是否允许点击遮罩关闭对话
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
    marginTop:{
      type: String,
      default: "",
    },
    zIndex:{
      type: String,
      default: "",
    }
  },
  methods: {
    modalClose() {
      this.$emit("update:show", false);
      this.$emit("modalClose");
    },
    /**点击遮罩关闭对话 */
    maskClick() {
      if (!this.maskClosable) return;
      this.$emit("update:show", false);
      this.$emit("maskClick");
    },
    ok(){
        this.$emit("update:show", false);
        this.$emit('ok');
    },
    cancel(){
        this.$emit("update:show", false);
        this.$emit('cancel');
    }
  },
};
</script>